import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Header from './Header';
import './Profile.css';

const Profile = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  
  // Check for mock authentication
  const isAuthenticated = !!localStorage.getItem('mockAuthToken');
  
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/auth');
    }
  }, [isAuthenticated, navigate]);
  
  // Get user data from localStorage
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isEditing, setIsEditing] = useState(false);
  const [editedUser, setEditedUser] = useState({});
  
  useEffect(() => {
    // Simulate loading user data
    const timer = setTimeout(() => {
      const userData = JSON.parse(localStorage.getItem('mockUser') || '{}');
      setUser(userData);
      setEditedUser(userData);
      setIsLoading(false);
    }, 800);
    
    return () => clearTimeout(timer);
  }, []);
  
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setEditedUser({
      ...editedUser,
      [name]: value
    });
  };
  
  const handleSave = () => {
    // Save updated user data
    setUser(editedUser);
    localStorage.setItem('mockUser', JSON.stringify(editedUser));
    setIsEditing(false);
  };
  
  const handleCancel = () => {
    setEditedUser(user);
    setIsEditing(false);
  };
  
  const handleLogout = () => {
    localStorage.removeItem('mockAuthToken');
    localStorage.removeItem('mockUser');
    navigate('/');
  };
  
  if (isLoading) {
    return (
      <div className="profile-container">
        <div className="profile-loading">
          <div className="spinner"></div>
          <p>{t('profile.loading')}</p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="profile-container">
      <Header />
      <div className="profile-content">
        <div className="profile-header">
          <h1>{t('profile.title')}</h1>
          <p>{t('profile.subtitle')}</p>
        </div>
        
        <div className="profile-card">
          <div className="profile-avatar">
            <div className="avatar-circle">
              {user?.name?.charAt(0)?.toUpperCase() || user?.email?.charAt(0)?.toUpperCase() || 'U'}
            </div>
            {isEditing ? (
              <button className="avatar-edit-btn">
                <span className="icon">📷</span>
                {t('profile.changeAvatar')}
              </button>
            ) : null}
          </div>
          
          <div className="profile-info">
            {isEditing ? (
              <div className="profile-form">
                <div className="form-group">
                  <label htmlFor="name">{t('profile.name')}</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={editedUser.name || ''}
                    onChange={handleInputChange}
                  />
                </div>
                
                <div className="form-group">
                  <label htmlFor="email">{t('profile.email')}</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={editedUser.email || ''}
                    onChange={handleInputChange}
                  />
                </div>
                
                <div className="form-group">
                  <label htmlFor="phone">{t('profile.phone')}</label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={editedUser.phone || ''}
                    onChange={handleInputChange}
                  />
                </div>
                
                <div className="form-group">
                  <label htmlFor="bio">{t('profile.bio')}</label>
                  <textarea
                    id="bio"
                    name="bio"
                    rows="4"
                    value={editedUser.bio || ''}
                    onChange={handleInputChange}
                  ></textarea>
                </div>
              </div>
            ) : (
              <div className="profile-details">
                <div className="detail-item">
                  <span className="detail-label">{t('profile.name')}</span>
                  <span className="detail-value">{user?.name || 'N/A'}</span>
                </div>
                
                <div className="detail-item">
                  <span className="detail-label">{t('profile.email')}</span>
                  <span className="detail-value">{user?.email || 'N/A'}</span>
                </div>
                
                <div className="detail-item">
                  <span className="detail-label">{t('profile.phone')}</span>
                  <span className="detail-value">{user?.phone || 'N/A'}</span>
                </div>
                
                <div className="detail-item">
                  <span className="detail-label">{t('profile.bio')}</span>
                  <span className="detail-value">{user?.bio || t('profile.noBio')}</span>
                </div>
              </div>
            )}
            
            <div className="profile-actions">
              {isEditing ? (
                <div className="edit-actions">
                  <button className="save-btn" onClick={handleSave}>
                    {t('profile.save')}
                  </button>
                  <button className="cancel-btn" onClick={handleCancel}>
                    {t('profile.cancel')}
                  </button>
                </div>
              ) : (
                <div className="view-actions">
                  <button className="edit-btn" onClick={() => setIsEditing(true)}>
                    {t('profile.edit')}
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
        
        <div className="profile-stats">
          <h2>{t('profile.activityStats')}</h2>
          <div className="stats-grid">
            <div className="stat-card">
              <div className="stat-icon">📷</div>
              <div className="stat-info">
                <div className="stat-value">248</div>
                <div className="stat-label">{t('profile.photosUploaded')}</div>
              </div>
            </div>
            
            <div className="stat-card">
              <div className="stat-icon">📁</div>
              <div className="stat-info">
                <div className="stat-value">12</div>
                <div className="stat-label">{t('profile.albumsCreated')}</div>
              </div>
            </div>
            
            <div className="stat-card">
              <div className="stat-icon">🗓️</div>
              <div className="stat-info">
                <div className="stat-value">3</div>
                <div className="stat-label">{t('profile.yearsActive')}</div>
              </div>
            </div>
            
            <div className="stat-card">
              <div className="stat-icon">💾</div>
              <div className="stat-info">
                <div className="stat-value">3.2GB</div>
                <div className="stat-label">{t('profile.storageUsed')}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div className="profile-settings">
          <h2>{t('profile.settings')}</h2>
          <div className="settings-list">
            <div className="setting-item" onClick={() => navigate('/settings')}>
              <div className="setting-info">
                <div className="setting-title">{t('profile.accountSettings')}</div>
                <div className="setting-description">{t('profile.accountSettingsDesc')}</div>
              </div>
              <div className="setting-arrow">→</div>
            </div>
            
            <div className="setting-item">
              <div className="setting-info">
                <div className="setting-title">{t('profile.privacySettings')}</div>
                <div className="setting-description">{t('profile.privacySettingsDesc')}</div>
              </div>
              <div className="setting-arrow">→</div>
            </div>
            
            <div className="setting-item">
              <div className="setting-info">
                <div className="setting-title">{t('profile.notificationSettings')}</div>
                <div className="setting-description">{t('profile.notificationSettingsDesc')}</div>
              </div>
              <div className="setting-arrow">→</div>
            </div>
          </div>
          
          <button className="logout-btn" onClick={handleLogout}>
            {t('profile.logout')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Profile;